<template>
  <div>
    <merchantHeader/>
    <div class="business">
      <div class="backonf">
        <div class="ontoi">
          <businessL/>
          <div class="datare">
            <div class="top_o">
              <div class="con">
                <div class="top_con_1">
                  <img style="margin-top: 10px;" src="@/assets/img/aa.png" alt="">
                  <div><span>商家名称</span></div>
                </div>
                <div class="top_con_2">
                  <div>今日收益</div>
                  <div> <span>+1256</span> 元</div>
                </div>
                <div class="top_con_3">
                  <div>月总收益</div>
                  <div><span>1256</span> 元</div>
                </div>
                <div class="top_con_4">
                  <div>可用余额</div>
                  <div><span>12560</span>元</div>
                  <div class="flex_lr">
                    <div @click="dialogVisible = true">提现</div>
                  </div>
                </div>
                <div class="top_con_4">
                  <div>可使用活动数</div>
                  <div><span>16</span>个</div>
                  <div class="flex_lr">
                    <div @click="dialogVisibleActivity = true">购买</div>
                  </div>
                </div>
              </div>
              <div class="bussrate">
                <div class="bussrate_btm">
                  <div>综合评分</div>
                  <div class="bussrate_btm_b">
                    <el-rate
                      v-model="ranking"
                      disabled
                      >
                    </el-rate>
                    <span style="color:#ff9900">{{ranking1}}</span>
                  </div>
                </div>
                <div class="bussrate_btm">
                  <div>产品体验感</div>
                  <div class="bussrate_btm_b">
                    <el-rate
                      v-model="ranking"
                      disabled
                      >
                    </el-rate>
                    <span style="color:#ff9900">{{ranking1}}</span>
                  </div>
                </div>
                <div class="bussrate_btm">
                  <div>价格合理性</div>
                  <div class="bussrate_btm_b">
                    <el-rate
                      v-model="ranking"
                      disabled
                      >
                    </el-rate>
                    <span style="color:#ff9900">{{ranking1}}</span>
                  </div>
                </div>
                <div class="bussrate_btm">
                  <div>产品上新率</div>
                  <div class="bussrate_btm_b">
                    <el-rate
                      v-model="ranking"
                      disabled
                      >
                    </el-rate>
                    <span style="color:#ff9900">{{ranking1}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="top_t">
              <h4>激活店铺　抢占黄金席位</h4>
              <p>任务1：完成店铺认证-------------------------->任务2：成功申请一次活动</p>
              <div class="boen">
                <div @click="wemA">立即认证</div>
                <div @click="$router.push('/bu41')">立即申请</div>
              </div>
            </div>
            <div class="top_s">
              <div class="a_ten">订单管理</div>
              <div class="txt txt1" @click="$router.push('/bu12?ax='+'second')"><i class="el-icon-document"></i><span>待付款</span>  </div>
              <div class="txt txt2" @click="$router.push('/bu12?ax='+'third')"><img src="@/assets/img/r2.png" alt="">待发货</div>
              <div class="txt txt3" @click="$router.push('/bu12')"><img src="@/assets/img/r3.png" alt=""> 售后待处理</div>
            </div>
            <div class="top_f">
              <div class="cc">活动申请</div>
              <div class="txt" @click="$router.push('/bu41')"><img src="@/assets/img/r5.png" alt=""> 免费体验活动申请</div>
              <div class="txt" @click="$router.push('/bu41')"><img src="@/assets/img/r4.png" alt=""> 价格竞猜活动申请</div>
              <div class="txt" @click="$router.push('/bu41')"><img src="@/assets/img/r6.png" alt=""> 新品预定活动申请</div>
            </div>
            <div class="top_LR">
              <div class="con_L">
                <div class="cenn">
                  <h4>数据中心</h4>
                </div>
                <div class="fo_e">
                  <div @click="$router.push('/bu92')">
                    <h4>活动浏览量</h4>
                    <span>6954</span>次
                    <p>(所有活动总浏览数量)</p>
                  </div>
                  <div @click="$router.push('/bu92')">
                    <h4>活动申请数</h4>
                    <span>6954</span>次
                    <p>(免费体验及价格竞猜活动总申请数)</p>
                  </div>
                  <div @click="$router.push('/bu91')">
                    <h4>新品预定人数</h4>
                    <span>6954</span>次
                    <p>(新品活动产品已预定人数)</p>
                  </div>
                  <div @click="$router.push('/bu93')">
                    <h4>已预定商品数</h4>
                    <span>6954</span>次
                    <p>(新品活动已预定产品总数量)</p>
                  </div>
                </div>
              </div>
              <div class="con_R">
                <div class="wwe">
                  <div class="ae">活动状态</div>
                  <div class="ajj">
                    <div @click="$router.push('/bu42')">
                      <img src="@/assets/img/r8.png" alt="">
                      <span>待审核 </span>
                      <p>3</p>
                    </div>
                    <div @click="$router.push('/bu43')">
                      <img src="@/assets/img/r7.png" alt="">
                      <span>已审核   </span>
                      <p>3</p>
                    </div>
                    <div @click="$router.push('/bu44')">
                      <img src="@/assets/img/r9.png" alt="">
                      <span>已上线  </span>
                      <p>3</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <businessF/>
          </div> 
        </div>
      </div>
      <el-dialog
          :visible.sync="dialogVisibleActivity"
          width="500px"
          :before-close="handleClose">
          <div class="lheds">购买活动</div>
          <div style="width:70%;margin:0 auto">
            <el-row>
              <el-col :span="6">
                数量：
              </el-col>
              <el-col :span="10">
                <el-input-number size="mini" v-model="num" @change="handleChange" :min="1" label="描述文字"></el-input-number>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                金额：
              </el-col>
              <el-col :span="10">
                <span>{{sum}}</span>元
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6" style="line-height:28px">
                <el-checkbox v-model="jifen" @change="jifens">积分:</el-checkbox>
              </el-col>
              <el-col :span="6">
                <el-input v-model="integrals" type="number" :max=integrations min=1 size="mini" :disabled="integralbol"></el-input>
              </el-col>
              <el-col :span="10" style="line-height:28px">
                <p>可使用积分{{integrations}}分</p>
              </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                  支付金额:
                </el-col>
                <el-col :span="10">
                  {{money}}元
                </el-col>
            </el-row>
          </div>
          <el-button style="margin: 0 auto;display: block;" type="danger" @click="quedgm()">确定购买</el-button>
          <div style="height:15px"></div>
        </el-dialog>
        <el-dialog
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <div class="lheds">提示</div>
          <div class="lbody">
            <div class="lbodyb" :class="{lactive:1==lshuj}" @click='lxuanz(1)'>提现到银行卡</div>
            <div class="lbodyb" :class="{lactive:2==lshuj}" @click='lxuanz(2)'>提现到微信</div>
          </div>
          <el-button style="margin: 0 auto;display: block;" type="primary" @click="dialogVisible = false">确 定</el-button>
          <div style="height:15px"></div>
        </el-dialog>
        <!-- 提现到微信 -->
        <el-dialog
          :visible.sync="dialogVisiblewx"
          width="30%"
          :before-close="handleClosewx">
          <div class="lheds">提现到微信</div>
          <div class="lbodywx">
            <el-row>
              <el-col :span="6">提现金额：</el-col>
              <el-col :span="12"><el-input type="text" :placeholder="holder" class="lelinput"></el-input></el-col>
              <el-col :span="6">全部提现</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">支付密码：</el-col>
              <el-col :span="12"><el-input type="text" class="lelinput"></el-input></el-col>
            </el-row>
            <el-row>
              <el-col :offset="6" :span="12">将根据提交信息预计到账时间</el-col>
            </el-row>
          </div>
          <el-button style="margin: 0 auto;display: block;" type="primary" @click="dialogVisiblewx = false">确 定</el-button>
          <div style="height:15px"></div>
        </el-dialog>
        <!-- 提现到银行卡 -->
        <el-dialog
          :visible.sync="dialogVisibleyh"
          width="30%"
          :before-close="handleCloseyhk">
          <div class="lheds">提现到银行卡</div>
          <div class="lbodywx">
            <div class="lyhk">
              <div class="lyhkb">
                <div class="lyhkbb">
                  <p>中国农业银行</p>
                  <p style="text-align: center;">622 **** **** 1546</p>
                  <p style="text-align: right;">解除绑定</p>
                </div>
              </div>
            </div>
            <el-row>
              <el-col :span="6">提现金额：</el-col>
              <el-col :span="12"><el-input type="text" class="lelinput"></el-input></el-col>
              <el-col :span="6">全部提现</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">支付密码：</el-col>
              <el-col :span="12"><el-input type="text" class="lelinput"></el-input></el-col>
            </el-row>
            <el-row>
              <el-col :offset="6" :span="12">将根据提交信息预计到账时间</el-col>
            </el-row>
          </div>
          <el-button style="margin: 0 auto;display: block;" type="primary" @click="dialogVisiblewx = false">确 定</el-button>
          <div style="height:15px"></div>
        </el-dialog>
    </div>
    <Footer/>
  </div>
</template>
<script>
import merchantHeader from '@/components/merchantHeader'
import Footer from '@/components/Footer'
import businessL from '@/components/businessL'
import businessF from '@/components/businessF'
export default {
    components: { 
    merchantHeader,
    Footer,
    businessL,
    businessF
    },
    data() {
    return {
      dialogVisible: false,
      dialogVisiblewx: false,
      dialogVisibleyh: false,
      dialogVisibleActivity:false,
      lshuj:0,
      holder:"",
      num:1,//活动个数
      sum:100,
      money:480,//支付金额
      integrals:"",//积分
      integralbol:true,//是否使用积分
      jifen:false,//是否使用积分
      integrations:3000,//可使用积分
      ranking:5,
      ranking1:null,
    }    
  },
  mounted(){
    console.log(this.$store.state.businessId)
    console.log(this.$store.state.sessionId)
    this.holder="可提现金额"+this.lshuj
    this.ranking1=this.ranking*2
  },
    methods: {
      lxuanz(ax){
        this.lshuj=ax;
        if(ax==2){
          this.dialogVisiblewx=true
        }else if(ax==1){
          this.dialogVisibleyh=true
        }
      },
      handleClosewx(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleCloseyhk(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      wemA(){
        this.$router.push({
          path: "/bu81"
        });
      },
      zhanghao(){
        this.$router.push({
          path: "/bu101"
        });
      },
      //购买活动
      handleChange(value) {
        this.sum=value*100
      },
      //是否使用积分
      jifens(){
        if(this.jifen){
          this.integralbol=false
        }else{
          this.integralbol=true
        }
      },
      //确定购买
      quedgm(){
        this.dialogVisibleActivity = false
        this.$message({
          message:'购买成功',
          type:'success'
        })
      }
    },
}
</script>
<style>
.business .flex_lr {
  display: flex;
  justify-content: space-between;
}
.business {
  background-color: #f06048;
}
.business .top_con_1 .cococ:hover {
  background-color: #ff9381;
  color: #fff;
  cursor: pointer;
  border: 1px solid #ff9381;
}
.business .backonf{
  width: 1200px;
	height: 1317px;
  margin: 0 auto;
	background-color: #eeeeee;
	border: solid 1px #a0a0a0;
}   
.business .ontoi {
  width: 1161px;
	height: 1227px;
  margin: 16px auto;
  display: flex;
  justify-content: space-between;
}

.business .datare {
  height: 1227px;
  width: 902px;
	border-radius: 6px;
  margin-top: -8px;
}

.business .top_o {
  width: 902px;
	height: 195px;
	background-color: #ffffff;
	border-radius: 6px;
}
.business .top_o .con {
  width: 100%;
	height: 132px;
  margin: 10px auto;
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
}
.business .top_con_1 {
  width: 150px;
  height: 132px;
  text-align: center;
  line-height: 24px;
}
.business .top_con_1 img{
  width: 76px;
  height: 76px;
  border-radius: 50%;
}
.business .top_con_1 span {
  font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #000;
}
.business .top_con_1 .flex_lr div {
  width: 70px;
	height: 23px;
	border-radius: 4px;
	border: solid 1px #a0a0a0;
  font-family: SourceHanSansCN-Regular;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #a0a0a0;
}
.business .top_con_2 div{
  font-family: SourceHanSansCN-Regular;
	font-size: 20px;
	font-weight: 600;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #313131;
}
.business .top_con_2 {
  text-align: center;
  margin-top: 5px;
  line-height: 55px;
}
.business .top_con_3{
  text-align: center;
  margin-top: 5px;
  line-height: 55px;
}
.business .top_con_4{
  text-align: center;
  margin-top: 5px;
  line-height: 43px;
}
.business .top_con_3 div{
  font-family: SourceHanSansCN-Regular;
	font-size: 20px;
	font-weight: 600;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #313131;
}
.business .top_con_4 div{
  font-family: SourceHanSansCN-Regular;
	font-size: 20px;
	font-weight: 600;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #313131;
  width: 180px;
  margin: 0 auto;
}
.business .top_con_2 span {
  font-family: Arial-BoldMT;
	font-size: 36px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #ff0000;
}
.business .top_con_3 span {
  font-family: Arial-BoldMT;
	font-size: 36px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #ff0000;
}
.business .top_con_4 span {
  font-family: Arial-BoldMT;
	font-size: 36px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #ff0000;
}
.business .top_con_4 .flex_lr div {
  width: 93px;
	line-height: 28px;
	background-color: #f06048;
	border-radius: 6px;
  text-align: center;
  font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
  color: #fff;
}
.business .top_t {
  width: 902px;
	height: 181px;
	background-color: #bc6868;
	border-radius: 6px;
  margin-top: 20px;
  text-align: center;
}
.business .top_t h4 {
  color: #fff;
	font-family: SourceHanSansCN-Bold;
	font-size: 36px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
  padding-top: 10px;
}
.business .top_t p {
  color: #fff;
	font-family: SourceHanSansCN-Bold;
	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
  margin-top: 20px;
}
.business .top_t .boen {
  width: 590px;
  margin: 25px auto;
  height: 35px;
  display: flex;
  justify-content: space-between;
}
.business .top_t .boen div{
	width: 134px;
	line-height: 33px;
	background-color: #eeeeee;
	border-radius: 17px;
  text-align: center;
  font-family: SourceHanSansCN-Bold;
	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #313131;
  cursor: pointer;
}
.business .top_t .boen div:hover {
  background-color: #ff9381;
  color: #fff;
}
.business .top_s {
  width: 902px;
	height: 65px;
	background-color: #ffffff;
	border-radius: 6px;
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.business .top_s .a_ten {
  width: 135px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-family: SourceHanSansCN-Bold;
	font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #313131;
  border-right: 1px solid #333
}
.business .datare i {
  font-size: 32px;
  color: #a0a0a0
}
.business .txt1:hover span,.txt1:hover i {
  color: #f06048;
}
.business .top_s .txt {
  width: 210px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #313131;
  display: flex;
  margin-left: 60px;
}
.business .top_f {
  width: 902px;
	height: 139px;
	background-color: #ffffff;
	border-radius: 6px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.business .top_f .cc {
  display: flex;
  align-items: center;
  font-family: SourceHanSansCN-Bold;
	font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #313131;
  margin-left: 15px;
}
.business .top_f .txt {
  width: 255px;
  height: 100px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-family: SourceHanSansCN-Regular;
	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #313131;
}
.business .top_LR{
  width: 902px;
  height: 348px;
	border-radius: 6px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.business .con_L {
  width: 600px;
	height: 348px;
	background-color: #ffffff;
	border-radius: 6px;
}
.business .con_L .cenn {
  height: 60px;
}
.business .con_L .fo_e {
  width: 573px;
  height: 270px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;

}
.business .con_L .fo_e div {
  width: 270px;
	height: 123px;
	border: solid 2px #a0a0a0;
  margin: 6px;
  text-align: center;
}
.business .con_L .fo_e div h4 {
  font-size: 20px;
	color: #313131;
  margin-top: 10px;
}
.business .con_L .fo_e div span {
  	font-size: 36px;
    color: #313131;
    line-height: 55px;
}
.business .con_L .fo_e div p {
  font-size: 14px;
	color: #a0a0a0;
}
.business .con_L .cenn h4{
  font-size: 24px;
  color: #313131;
  height: 60px;
  line-height: 55px;
  margin-left: 21px;
  text-align: left;
}
.business .con_R {
  width: 282px;
	height: 348px;
	background-color: #ffffff;
	border-radius: 6px;
}
.business .con_R .wwe{
  height: 300px;
  width: 236px;
  margin: 25px auto;
}
.business .con_R .wwe .ae {
  font-size: 24px;
  color: #313131;
  text-align: left;
}
.business .con_R .wwe .ajj div{
  height: 50px;
  width: 233px;
  border-bottom: 1px solid #000;
  margin-top: 40px;
  display: flex;
  font-size: 20px;
	color: #313131;
  justify-content: space-between;
}
.business .con_R .wwe .ajj div img {
  width: 32px;
	height: 33px;
}

.business .el-dialog__header{
  padding: 0px !important;
}
.business .el-dialog__body{
  padding: 0px !important;
}
.business .lheds{
  width: 100%;
  height: 60px;
  background-color: rgb(240, 96, 72);
  color: white;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
}
.business .lbody{
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.business .lbodyb{
  width: 40%;
  border: solid 1px rgb(160, 160, 160);
  height: 76px;
  line-height: 76px;
  text-align: center;
  margin: 30px 0px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  font-size: 18px;
  color: rgb(160, 160, 160);
}
.business .lactive{
  border: solid 1px rgb(240, 96, 72);
  color: rgb(240, 96, 72);
}
.business .lbodywx{
  width: 80%;
  margin: 0 auto;
}
.business .lbodywx .el-input__inner{
  height: 20px;
}
.business .el-row {
    margin: 20px 0px;
}
.business .lyhk{
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.business .lyhkb{
  width: 40%;
  height: 97px;
  margin-top: 15px;
  border: solid 1px rgb(240, 96, 72);
}
.business .lyhkbb{
  width: 90%;
  height: 77px;
  margin:10px auto;
  border-radius: 3px;
  background-color: rgb(137,201,151);
}
.bussrate{
  justify-content: space-around;
}
.business .datare .bussrate i{
  font-size: 20px;
}
.bussrate_btm,.bussrate_btm_b,.bussrate{
  display:flex
}

</style>